<template>
  <div>  
    <el-card>
          <template v-slot:header>
              <div class="clearfix">
                  <span>业务方流程[1]</span>
              </div>
          </template>
          <el-row :gutter="10">
              <el-col>
                <div class="mb-4">
                  <el-button>Default</el-button>
                  <el-button type="primary">Primary</el-button>
                  <el-button type="success">Success</el-button>
                  <el-button type="info">Info</el-button>
                  <el-button type="warning">Warning</el-button>
                  <el-button type="danger">Danger</el-button>
                  <el-button type="primary" icon="Search">搜索</el-button>
                  <el-button icon="Refresh" >重置</el-button>
                </div>

              </el-col>
          </el-row>
      </el-card>
      <el-card>
          <template v-slot:header>
              <div class="clearfix">
                  <span>业务方流程[1]</span>
              </div>
          </template>
          <el-row :gutter="10">
              <el-col :md="6" v-for="(item, index) in outsideflowList">
                  <el-card shadow="always" class="card-col" @click="handleOutSide(item)">
                      <div slot="title">
                          <div class="card-icon">
                              <el-avatar size="large">
                                  <img :src="item.IconUrl" />
                              </el-avatar>
                          </div>
                          <div class="card-title">
                              <a>{{ item.title }}</a>
                              <p>{{ item.description }}</p>
                          </div>
                      </div>
                  </el-card>
              </el-col>
          </el-row>
      </el-card>

  </div>
</template>

<script setup>
import { onMounted, getCurrentInstance } from 'vue' 
const { proxy } = getCurrentInstance(); 
const outsideflowList = [
  {
      title: "第三方流程",
      description: "接入测试",
      IconUrl: getAssetsFile("jiejing")
  }
];

onMounted(async () => {
  //proxy.$modal.loading(); 
});


function handleOutSide(row) {
  proxy.$tab.openPage("/outsideMgt/bizForm", "三方接入表单");
  return;
}
function getAssetsFile(pathUrl) {
  return new URL(`../../assets/images/work/${pathUrl}.png`, import.meta.url).href;
}

</script>
<style scoped lang="scss">
.card-col {
  cursor: pointer;
  margin-bottom: 10px;
  overflow: hidden;
}

.card-col:hover {
  background: rgba(0, 0, 0, 0.45);
  .card-title a,
  p {
      color: #ffff;
  }
}

.el-card {
  margin-bottom: 5px !important;
}
.card-title {
  float: left;
  margin-left: 15px;
  a {
      margin-bottom: 8px;
      font-size: 14px;
      color: #1890ff;
      width: 95px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  p {
      width: 95px;
      font-size: 12px;
      font-weight: 300;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
}

.card-icon {
  float: left;
  transform: translate(5%, -10%);
}
</style>